<script lang='ts' setup>
import { ref, Ref, reactive } from 'vue'
import appMenuServiceApi from '/@/api/org/bean/app-menu'

//定义事件
const emit = defineEmits<{
    (e: 'save-success', data: any, res: any): void//新增保存 修改保存 成功回调
}>()
const props = defineProps({
    /**菜单id */
    menuId: String,
    /**父菜单id */
    parentMenuId: String
})

const AppMenuFormData: Ref<any> = ref({
    menuId: props.menuId,
    parentMenuId: props.parentMenuId
})

const JxtechModelFormRef = ref();

const AppMenuFormState = reactive({
    primaryKey: 'menuId',
    rules: {
        menuCode: [{ required: true, message: '请输入菜单编码', trigger: 'blur' }],
        menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        orderNum: [{ type: 'number', message: '排序必须是数字', trigger: 'blur' }],

    },
    newBeanFunction: () => {
        return appMenuServiceApi.add({ parentMenuId: props.parentMenuId })
    },
    //新增保存 修改保存 成功后触发
    onSaveSuccess: (data: any, res: any) => {
        emit("save-success", data, res)
    },
    modelFormCallback: {
        preSave: (data: any) => {
            data.vuePath = data.menuUrl
        }
    }
})

//对外提供方法
defineExpose({
    save: () => JxtechModelFormRef.value.save()
})
</script>
<template>
    <jxtech-model-form
        ref="JxtechModelFormRef"
        :service-api="appMenuServiceApi"
        :primary-key="AppMenuFormState.primaryKey"
        :form-data="AppMenuFormData"
        :rules="AppMenuFormState.rules"
        :new-bean-function="AppMenuFormState.newBeanFunction"
        :callback="AppMenuFormState.modelFormCallback"
        @save-success="AppMenuFormState.onSaveSuccess"
    >
        <el-row>
            <el-col :span="21" :offset="1">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <jxtech-model-form-item label="菜单编码" prop="menuCode">
                            <el-input placeholder="请输入菜单编码" v-model="AppMenuFormData.menuCode"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <jxtech-model-form-item label="菜单名称" prop="menuName">
                            <el-input placeholder="请输入菜单名称" v-model="AppMenuFormData.menuName"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="父级菜单" prop="parentMenuName">
                            <el-input disabled v-model="AppMenuFormData.parentMenuName"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="排序" prop="orderNum">
                            <el-input placeholder="请输入排序" v-model.number="AppMenuFormData.orderNum"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="是否按钮" prop="pagePoint">
                            <el-radio-group v-model="AppMenuFormData.pagePoint">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="是否叶子" prop="menuChief">
                            <el-radio-group v-model="AppMenuFormData.menuChief">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="图标" prop="menuImageUrl">
                            <el-input v-model="AppMenuFormData.menuImageUrl"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <jxtech-model-form-item label="菜单路由" prop="menuUrl">
                            <el-input v-model="AppMenuFormData.menuUrl"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </jxtech-model-form>
</template>